"use strict";

import React, { Component } from "react";

import { StyleSheet, Text, View, Alert,TouchableNativeFeedback } from "react-native";

import Touchable from "./Touchable";

const menu1 = [
  {
    name: "继续游戏",
    key: 1
  },
  {
    name: "重新开始",
    key: 2
  },
  {
    name: "新的游戏",
    key: 3
  }
];
const menu2 = [
  {
    name: "详情",
    key: 1
  },
  {
    name: "充值",
    key: 2
  },
  {
    name: "排行",
    key: 3
  },
  {
    name: "分享",
    key: 4
  }
];
export default class Menu extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {}
  chooseBottomMenu() {
    Alert.alert("温馨提示", "此功能正在开发，请静候");
  }
  chooseMenu() {
    this.props.closeMenu();
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.mainOptions}>
          {menu1.map((item, index) => {
            return (
              <View key={index + 1}>
                <Touchable onPress={this.chooseMenu.bind(this)}>
                  <Text style={styles.mainOption}>{item.name}</Text>
                </Touchable>
              </View>
            );
          })}
        </View>
        <View style={styles.bottomOptions}>
          {menu2.map((item, index) => {
            return (
              <View key={index + 1}>
                <Touchable onPress={this.chooseBottomMenu.bind(this)}>
                  <Text style={styles.fontColor}>{item.name}</Text>
                </Touchable>
              </View>
            );
          })}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#29ccf7"
  },
  mainOptions: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  mainOption: {
    textAlign: "center",
    color: "white",
    fontSize: 20,
    height: 44,
    lineHeight: 44
  },
  bottomOptions: {
    height: 44,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  fontColor: {
    color: "white"
  }
});
